<template>
  <div>
    <!-- 顶部图片 -->
    <van-icon name="arrow-left" />
    <img
      width="100%"
      src="https://imgs.jieqinwang.com/Public/Upload/2019-12-09/5dedb812748e7.jpg!face.jpg"
      alt=""
    />
    <!-- 简介文案 -->
    <div>
      <p style="margin: 15px; font-size: 18px">千禧婚车[玛莎拉蒂]</p>
      <span style="font-size: 12px">接亲价</span>
      <span style="font-size: 18px; color: #fb4853">￥1000-5000</span>
      <p
        style="
          margin-left: 40px;
          font-size: 12px;
          color: #999;
          margin-bottom: 15px;
        "
      >
        提供司机，包含油费
      </p>
    </div>
    <!-- 详情图片 -->
    <img style="width: 100%" v-for="img in imageList" v-lazy="img" :key="img" />
    <!-- 底部选项 -->

    <van-dialog v-model="show" title="标题" show-cancel-button>
      <input type="text" />
    </van-dialog>
    <van-button @click="showdialog">点击</van-button>

    <van-button @click="OnlineBooking" class="cardetail-bottom"
      >在线预约</van-button
    >
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
import { Dialog } from "vant";
Vue.use(Lazyload);
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  name: "CarDetails",
  data() {
    return {
      show: false,
      imageList: [
        "https://imgs.jieqinwang.com/Public/Upload/2019-12-09/5dedb81289fb1.jpg!face.jpg",
        "https://imgs.jieqinwang.com/Public/Upload/2019-12-09/5dedb812a22fe.jpg!face.jpg",
        "https://imgs.jieqinwang.com/Public/Upload/2019-12-09/5dedb812b5792.jpg!face.jpg",
        "https://imgs.jieqinwang.com/Public/Upload/2021-02-25/60374f0e3e3ec.jpg!face.jpg",
        "https://imgs.jieqinwang.com/Public/Upload/2021-02-25/60373cbeec950.jpg!face.jpg",
      ],
    };
  },
  methods: {
    showdialog() {
      this.show = true;
    },
    OnlineBooking() {
      Dialog.confirm({
        title: "请确认联系方式",
        message: "稍后将有热情客服联系您！",
        theme: "round-button",
        transition: "fade",
        allowHtml: true,
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less" scoped>
.van-icon {
  position: absolute;
  left: 3%;
  top: 3%;
  color: black;
}
.cardetail-bottom {
  margin: 10px 0 50px;
  padding: 20px;
  border-radius: 10px;
  width: 500px;
  font-size: 30px;
  background-color: #fb4853;
  color: white;
}
</style>